<template>
  <div id="tex">
    <h1>我的分支</h1>
    <p>{{ mobal }}</p>
    <p>{{ stu.a }}</p>
    <p>
      <span> {{ right ? 'rigth' : 'left' }}</span
      ><span>{{ ok ? 'yes' : 'no' }}</span>
    </p>
    <p></p>
    <div>
      <!-- v-on——事件绑定 -->
      <button v-on:click="welcome">欢迎</button>

      <!-- .exact 修饰符允许控制精确的系统修饰符组合触发的事件 -->
      <!-- 在 Vue 中，引入了 "按键修饰符" 。简单来说，它将一些常用的按键起了个名字，就不需要再记忆那些枯燥的键码值。 -->
      <button @click.ctrl="ctrl">ctrl+任意</button>
      <button @click.ctrl.exact="ctrl2">单ctrl</button>
      <button @click.exact="click">无修饰符</button>
      <!-- 事件修饰符 -->
      <div @click="add1">
        <div @click="add2">
          <!-- 点击一次，触发add3但无冒泡，再次点击是触发冒泡但add3事件不被触发 -->
          <!-- stop--阻止冒泡          once--只触发一次 -->
          <div @click.stop.once="add3">戳两次(阻止一次冒泡事件)</div>
          <div @click="add3">冒泡</div>
        </div>
      </div>
      <a href="http://www.baidu.com">百度</a><br />
      <a href="http://www.baidu.com" v-on:click.prevent>百度---阻止跳转</a>
      <!-- 添加时间监听器是使用事件捕获模式 -->
      <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素的处理 -->
      <div v-on:click.capture='firstThis'>this</div>
      <!-- 只在event.target是当前元素只剩是触发处理函数。即事件不是从内部触发的 -->
      <div v-on:click.self='doThat'>that</div>
    </div>
    <!-- v-html指令，按照超文本格式插入内容 -->
    <p>无v-html修饰：{{ masg1 }}</p>
      <p v-html="masg2"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobal: '模板语法{{}}',
      stu: { a: '赵', b: '钱', c: '孙' },
      right: true,
      ok: false,
      masg1: '<span style="color:red">超文本文字</span>',
      masg2: '<span style="color:red">超文本文字</span>',
    }
  },
  methods: {
    welcome() {
      alert('welcome')
    },
    ctrl() {
      alert('任意修饰符与ctrl组合或单ctrl可触发')
    },
    ctrl2() {
      alert('有且只有ctrl被按下才触发')
    },
    click() {
      alert('无任何修饰符被按下时触发')
    },
    // 事件修饰符
    add1() {
      console.log('111')
    },
    add2() {
      console.log('222')
    },
    add3() {
      console.log('333')
    },
  },
}
</script>

<style scoped></style>
